<template>
  <div class="geo_distribute">

    <div class="geo_distribute_btn">
      <el-button @click="handleTu('fb')" :class="{tu_active:activeBtn=='fb'}">地热分布图</el-button>
      <el-button @click="handleTu('kf')" :class="{tu_active:activeBtn=='kf'}">开发利用图</el-button>
      <el-button @click="handleTu('gz')" :class="{tu_active:activeBtn=='gz'}">构造关系图</el-button>
      <el-button @click="handleTu('cy')" :class="{tu_active:activeBtn=='cy'}">地热成因图</el-button>
    </div>
    <div class="geo_distribute_upload">
      <el-upload ref="upload" :limit="1" :accept="upload.file_type" :action="upload.url" :data="upload.data" :headers="upload.headers" :show-file-list="false" :file-list="upload.fileList" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false">
       <!--  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        <el-button slot="trigger" type="primary" @click="handleAdd">选取文件</el-button>
        <el-button style="margin-left: 10px;" icon="el-icon-upload" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>

      </el-upload>
      <el-progress :text-inside="true" :stroke-width="34" :percentage="percentage"></el-progress>
    </div>
    <div class="geo_distribute_pic">
      <div class="geo_distribute_title">
        {{title}}
      </div>
      <el-tooltip class="item" effect="light" content="点击预览" placement="right-end">
        <el-image :src="seePath" :preview-src-list="[seePath]">
          <div slot="error" class="el-image__error">
            未上传
          </div>
        </el-image>
      </el-tooltip>
      <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[seeUrl]" />

    </div>
    <div class="geo_distribute_infor">
      <span class="title">上传图片详细信息</span>
      <el-table :data="tuInfo" height="250">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="上传人" align="center" prop="uploader" />
        <el-table-column label="时间" align="center" prop="time" />
        <el-table-column label="上传状态" align="center" width="80">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==1">成功</el-tag>
            <el-tag type="danger" v-else>失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleSee(scope.row)">查看</el-button>
            <el-button size="mini" :class="{usedText:scope.row.fileUsed==1}" type="text" :icon="scope.row.fileUsed!=1?'el-icon-video-play':'el-icon-check'" @click="handleUse(scope.row,scope.$index)">使用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { getToken } from "@/utils/auth";
import { listUpload, getUpload, delUpload, addUpload, updateUpload } from "@/api/uploadfile";

export default {
  components: {
    ElImageViewer,
  },
  data() {
    return {
      showViewer: false, // 显示查看器
      seeUrl: '',
      activeBtn: 'fb',
      title: '地热分布图',
      activeInfo: [],
      percentage: 0,
      // 上传参数
      upload: {
        file_type: ".jpg, .png",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/dr/upload/morefile",
        // 上传的文件列表
        fileList: [],
        // projectno:  drfb 41862   kfly 1161225  gzgx 726724 drcy 418325   file_module drfbtu shuizhitu zhuzhuangtu
        data: { projectno: 41862, file_type: '.jpg, .png', uploader: null, file_module: "drfbtu" }
      },
      seePath: '',
      tuInfo: [],
      uploadQueryParams: {
        projectno: null,
        status: null
      },
      uploadUpdateParams: {
        fileId: null,
        fileUsed: null
      }
    }
  },
  computed: {
    /*   seePath() {
        return this.activeInfo.find((item) => {
          return item.used == 1
        }).path
      } */
  },
  created() {
    this.fbTu();
    this.upload.data.uploader = this.$store.getters.name;
    console.log(this.$store.getters.name)
    this.uploadQueryParams.projectno = 41862;
    this.getListUpload();
    /* this.seePath = this.activeInfo[0].path */
  },
  methods: {
    handleSee(seeInfo) {
      this.showViewer = true
      this.seeUrl = process.env.VUE_APP_BASE_API + seeInfo.filePath;
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    handleTu(tu) {
      switch (tu) {
        case 'fb': this.fbTu()
          break;
        case 'kf': this.kfTu()
          break;
        case 'gz': this.gzTu()
          break;
        case 'cy': this.cyTu()
          break;
      }
      this.getListUpload();
    },
    fbTu() {
      this.activeBtn = 'fb';
      this.title = '地热分布图';
      this.activeInfo = this.fbTuInfo;
      this.upload.data.projectno = 41862;
      this.percentage = 0;
      this.uploadQueryParams.projectno = 41862;
      /* this.seePath = this.activeInfo[0].path */
    },
    kfTu() {
      this.activeBtn = 'kf';
      this.title = '开发利用图';
      this.activeInfo = this.kfTuInfo;
      this.upload.data.projectno = 1161225;
      this.percentage = 0;
      this.uploadQueryParams.projectno = 1161225;
    },
    gzTu() {
      this.activeBtn = 'gz';
      this.title = '构造关系图';
      this.activeInfo = this.gzTuInfo;
      this.upload.data.projectno = 726724;
      this.percentage = 0;
      this.uploadQueryParams.projectno = 726724;
    },
    cyTu() {
      this.activeBtn = 'cy';
      this.title = '地热成因图';
      this.activeInfo = this.cyTuInfo;
      this.upload.data.projectno = 418325;
      this.percentage = 0;
      this.uploadQueryParams.projectno = 418325;
    },
    handleUse(used, index) {
      if (used.fileUsed == 1) {
        this.$message({
          type: 'warning',
          message: '已经使用!'
        });
        return;
      }
      this.$confirm('此操作将使用该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let tempTuInfo = this.tuInfo;
        let oldUsed = tempTuInfo.find((item) => {
          return item.fileUsed === 1;
        })
        if (oldUsed) {
          this.putUpdateUpload({ fileId: oldUsed.fileId, fileUsed: 0 }).then(() => {
            console.log(111)
            this.putUpdateUpload({ fileId: used.fileId, fileUsed: 1 }).then(() => {
              console.log(222)
              this.getListUpload();
            })
          })
        } else {
          this.putUpdateUpload({ fileId: used.fileId, fileUsed: 1 }).then(() => {
            console.log(222)
            this.getListUpload();
          })
        }
        console.log(oldUsed)




        this.$message({
          type: 'success',
          message: '使用成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消使用'
        });
      });
    },
    /**上传 */
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      console.log(event)
      console.log(file)
      this.upload.isUploading = true;
      this.percentage = event.loaded / event.total * 100 | 0;  //百分比
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.seePath = response.url;
      this.getListUpload();
    },
    handleAdd() {
      this.percentage = 0;
      this.upload.fileList = [];
    },
    handleUpdate(row) {

      this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
    },
    // 文件提交处理
    submitUpload() {
      this.$refs.upload.submit();
    },
    /**上传结束 */
    getListUpload() {
      listUpload(this.uploadQueryParams).then((res) => {
        this.tuInfo = res.rows;
        /*  console.log(res) */
      })
    },
    putUpdateUpload(uploadUpdateParams) {
      return new Promise((resolve, reject) => {
        updateUpload(uploadUpdateParams).then((res) => {
          resolve();
        })

      })

    }

  }
};
</script>
<style lang="scss" scoped>
.geo_distribute {
  /* border: 1px solid red; */
  margin-top: 10px;
  .geo_distribute_title {
    text-align: left;
    padding: 0 5px;
    font-size: 20px;
    color: #449fc8;
    width: 25px;
  }
  .geo_distribute_btn {
    margin-top: 10px;
    /**& 用在嵌套代码里，来引用父元素 */
    /* border: 1px solid rgb(13, 175, 21); */
    display: flex;
    /**flex居中 */
    align-items: center;
    justify-content: center;
    .el-button {
      width: 130px;
      height: 40px;
      font-size: 18px;
      color: rgb(17, 17, 17);
      border-radius: 15px;
    }
    .tu_active {
      background-color: rgba(1, 128, 128, 0.8);
    }
    /* .el-button:nth-child(1) {
      background-color: rgba(217, 0, 27, 0.8);
    }
    .el-button:nth-child(2) {
      background-color: rgba(4, 166, 26, 0.8);
    }
    .el-button:nth-child(3) {
      background-color: rgba(0, 128, 128, 0.8);
    }
    .el-button:nth-child(4) {
      background-color: rgba(2, 125, 180, 0.8);
    } */
  }
  .geo_distribute_upload {
    margin-top: 10px;
    padding: 10px;
    /* border: 1px solid rgb(21, 24, 216); */
    display: flex;
    flex-direction: row;
    /* justify-content: space-around; */
    .el-button {
      height: 34px;
      width: 145px;
      font-size: 15px;
    }
    .el-progress {
      margin-left: 80px;
      /* height: 64px; */
      width: 70%;
    }
    .el-result {
      padding: 0;
      font-size: 18px;
    }
    .el-upload__tip {
    }
  }
  .geo_distribute_pic {
    border-radius: 5px;
    margin: 10px;
    padding: 10px;
    border: 1px solid rgb(1, 128, 128);
    /* height: 274px; */
    display: flex;
    align-items: center;
    justify-content: center;

    .el-image {
      margin: 0 auto;
      width: 484px;
      height: 340px;
    }
  }
  .geo_distribute_infor {
    margin-top: 10px;
    padding: 5px;
    .title {
      display: block;
      /*  height: 45px; */
      padding: 5px;
      background-color: #f5f5f5;
      margin-bottom: 10px;
    }
    .usedText {
      color: #67c23a;
    }
    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 4px;
    }
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.9);
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: rgba(66, 66, 66, 1);
      -webkit-box-shadow: inset 0 0 6px rgba(227, 227, 227, 87.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(227, 227, 227, 0.5);
    }
  }
}
</style>